<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态表格</title>
<style>

</style>
<script>
function checkAll(c){
var status=c.checked;
var items=document.getElementsByName("item");
for(var i=0;i<items.length;i++){
items[i].checked=status;
}
}
function delAll(){
var list=document.getElementById("listbody");
var items = document.getElementsByName("item");
for(var j=0;j<items.length;j++){
if(items[j].checked){
var tr=items[j].parentNode.parentNode;
list.removeChild(tr);
j--;
}
}
}

function delone(d){
			var tr = d.parentNode.parentNode;var a = document.createElement("a");
			var listbody  = document.getElementById("tableuser");
			listbody.removeChild(tr);
			
}


function addlist(){
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;

var tr=document.createElement("tr");//row 

var td1=document.createElement("td");//row
var input=document.createElement("input");
input.setAttribute("type","checkbox");
input.setAttribute("name","item");
td1.appendChild(input);

var td2=document.createElement("td");
td2.innerHTML=id;
var td3=document.createElement("td");
td3.innerHTML=name;

var a=document.createElement("a");
a.setAttribute("href","javascript:void(0)");
a.setAttribute("onclick","delone(this)");
a.innerHTML="删除";
td3.appendChild(a);

tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);

document.getElementById("listbody").appendChild(tr);
}

function addlisthtml(){
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;

var str=document.getElementById("tableuser").innerHTML;
document.getElementById("tableuser").innerHTML=str+'<tr><td><input type="checkbox" onclick="checkAll(this)"/></td><td>'+id+'</td><td>'+name+'</td></tr>';
}


</script>
</head>
<body>
<table border="1" id="tableuser" align="center" height="300px" width="500px">
<thead>
<tr id="list">
<th>选中</th>
<th>编号</th>
<th>姓名</th>
</tr>
<tr>
<td><input type="checkbox" onclick="checkAll(this)"/></td>
<td>SX001</td>
<td>李白</td>
</tr>
</thead>
</table>

<hr/>

<form>
<table>
<tr>
<td>编号</td>
<td><input type="text" name="number" id="id"/></td>
</tr>
<tr>
<td>姓名 </td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td><input type="reset" value="重置"/></td>
<td>
<input type="button" value="添加" onclick="addlisthtml()"/>
<input type="button" value="全部删除" onclick="delAll()"/>
</td>
</tr>
</table>
</form>
</body>
</html>